<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NL4DV | VIS Matrix</title>

    <!--Favicon-->
    <link rel='shortcut icon' type='image/x-icon' href="{{ url_for('vis_matrix.static', filename='img/favicon.ico') }}"/>

    <!--Vendor CSS files-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.css" rel="stylesheet">

    <!--Custom CSS files-->
    <link href="{{ url_for('vis_matrix.static', filename='css/style.css') }}" rel="stylesheet">

</head>
<body>
    <div class="container-fluid">
        <br/>
        <div class="row">
            <div class="col-md-12">
                <button class="btn btn-primary" onclick="execute()">
                    Execute
                </button>
            </div>
        </div>
        <br/>
        <div class="row">
            <div class="col-md-12">
                <div class="loadingModal"></div>
                <div class="table-responsive">
                    <table style="width:100%" class="table table-condensed table-bordered" id="debugTable">
                        <thead>
                            <tr>
                                <th>Attribute Combination</th>
                                <!--<th width="150">Query</th>-->
                                <th>Attribute</th>
                                <th>Inferred Task</th>
                                <th>Recommended Visualizations</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
        <!--<br/>-->
        <!--<div id="showModal" class="modal">-->
            <!--<div class="modal-content">-->
                <!--<span class="close">&times;</span>-->
                <!--<b>Show All Table </b>-->
                <!--<br>-->
                <!--<b id="ShowAllQuery"></b>-->
                <!--<table id="visList" class= "table table-bordered table-sm">-->
                <!--<thead>-->
                    <!--<tr>-->
                        <!--<th>Vis</th>-->
                        <!--<th>Score</th>-->
                    <!--</tr>-->
                <!--</thead>-->
                <!--</table>-->
            <!--</div>-->
        <!--</div>-->
    </div>
</body>

<!--JS files-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>

<script src="{{ url_for('vis_matrix.static', filename='js/global.js') }}"></script>
<script src="{{ url_for('vis_matrix.static', filename='js/utils.js') }}"></script>
<script src="{{ url_for('vis_matrix.static', filename='js/ui.js') }}"z></script>
<script src="{{ url_for('vis_matrix.static', filename='js/main.js') }}"></script>

</html>
